<template>
  <view class="order-confirm">
    <!-- 收货地址 -->
    <view class="address-section" @click="selectAddress">
      <view class="address-info" v-if="address">
        <view class="name-phone">
          <text class="name">{{address.name}}</text>
          <text class="phone">{{address.phone}}</text>
        </view>
        <view class="detail">
          {{address.province}}{{address.city}}{{address.district}}{{address.detail}}
        </view>
      </view>
      <view class="no-address" v-else>
        <text>请选择收货地址</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
    </view>
    
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="section-title">商品信息</view>
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <image class="goods-image" :src="item.image" mode="aspectFit"></image>
        <view class="goods-info">
          <view class="goods-name">{{item.name}}</view>
          <view class="goods-spec">规格: {{item.spec}}</view>
          <view class="goods-bottom">
            <text class="price">¥{{item.price}}</text>
            <text class="num">x{{item.num}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text>商品合计</text>
        <text>¥{{totalPrice}}</text>
      </view>
      <view class="info-item">
        <text>运费</text>
        <text>¥{{freight}}</text>
      </view>
      <view class="info-item total">
        <text>实付款</text>
        <text class="price">¥{{actualPayment}}</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-section">
      <view class="section-title">支付方式</view>
      <radio-group @change="changePayment">
        <label class="payment-item" v-for="(item, index) in paymentList" :key="index">
          <view>
            <image :src="item.icon" mode="aspectFit"></image>
            <text>{{item.name}}</text>
          </view>
          <radio :value="item.value" :checked="paymentType === item.value" color="#ff2d4a"></radio>
        </label>
      </radio-group>
    </view>
    
    <!-- 提交订单 -->
    <view class="submit-bar">
      <view class="total">
        <text>合计: </text>
        <text class="price">¥{{actualPayment}}</text>
      </view>
      <view class="submit-btn" @click="submitOrder">
        提交订单
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: null,
      goodsList: [
        {
          id: 1,
          name: '商品名称',
          image: '/static/goods1.jpg',
          spec: '默认规格',
          price: '99.00',
          num: 1
        }
      ],
      paymentList: [
        {
          name: '微信支付',
          value: 'wechat',
          icon: '/static/wechat-pay.png'
        },
        {
          name: '支付宝',
          value: 'alipay',
          icon: '/static/alipay.png'
        }
      ],
      paymentType: 'wechat',
      freight: '10.00'
    }
  },
  computed: {
    totalPrice() {
      return this.goodsList.reduce((total, item) => {
        return total + item.price * item.num
      }, 0).toFixed(2)
    },
    actualPayment() {
      return (parseFloat(this.totalPrice) + parseFloat(this.freight)).toFixed(2)
    }
  },
  methods: {
    selectAddress() {
      uni.navigateTo({
        url: '/pages/user/address/select'
      })
    },
    changePayment(e) {
      this.paymentType = e.detail.value
    },
    submitOrder() {
      if (!this.address) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.redirectTo({
          url: '/pages/order/result?order_id=123456&status=success'
        })
      }, 1500)
    }
  }
}
</script>

<style>
.order-confirm {
  padding-bottom: 120rpx;
}
.address-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.address-info {
  flex: 1;
}
.name-phone {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.name {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
}
.phone {
  font-size: 28rpx;
  color: #666;
}
.detail {
  font-size: 28rpx;
  color: #666;
}
.no-address {
  flex: 1;
  font-size: 28rpx;
  color: #999;
}
.goods-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.goods-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f1f1f1;
}
.goods-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-spec {
  font-size: 24rpx;
  color: #999;
}
.goods-bottom {
  display: flex;
  justify-content: space-between;
}
.price {
  font-size: 28rpx;
  color: #ff2d4a;
}
.num {
  font-size: 24rpx;
  color: #999;
}
.order-info {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #666;
}
.info-item.total {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f1f1f1;
}
.payment-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f1f1f1;
}
.payment-item image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}
.submit-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #f1f1f1;
}
.total {
  flex: 1;
  text-align: right;
  padding-right: 20rpx;
  font-size: 28rpx;
  color: #666;
}
.price {
  color: #ff2d4a;
  font-weight: bold;
}
.submit-btn {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 28rpx;
}
</style>